/**index.less**/
@import "/assets/common.less";
page{
  height:100vh;
}
.index-page{
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
}
.upload-icon {
  width: 48rpx;
  height: 48rpx;
  cursor: pointer;
}
.file-icon {
  //width: 16px;
  //min-width: 16px;
  height: 12px;
  display: inline-block;
}
.navigation-bar{
  position: relative;
  width: 94%;
  margin: auto;
  .iconfont {
    font-size: 24px;
  }
  .logo{
    width: 245rpx;
    height: 70rpx;
  }
  .filter-line {
    width: 100%;
    margin-top: 34rpx;
    margin-bottom: 18rpx;
    .dir-row {
      display: flex;
      align-items: center;
      margin-bottom: 12rpx;
      gap: 12rpx;
    }
  }
  .count {
    color: #787878;
    height: 46rpx;
    font-size: 28rpx;
    margin: 18rpx 0 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20rpx;
    .folder-dialogue-btn{
      color: #0A4CE9;
    }
  }
  .important-dir-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; // 默认透明背景
    height: 68rpx;
    line-height: 68rpx;
    padding: 0 20rpx;
    border-radius: 16rpx;
    font-size: 28rpx;
    color: #333;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 0.5px solid #ACACAC; // 未选中时的边框
    transition: all 0.3s ease;
    
    &.selected {
      background: #E3E8FC; // 选中时使用原背景色
      border: 1px solid #0A4CE9; // 选中时的边框
    }
  }
}

.main-content{
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .card_item {
    margin: 20rpx;
    padding: 20rpx 28rpx;
    font-size: 28rpx;
    &:nth-child(odd) {
      background: #F4F4F5;
      border-radius: 16rpx;
    }
    .title{
      line-height: 40rpx;
      padding-bottom: 10rpx;
      word-break: break-all;
      image{
        margin-top: -5px;
        margin-right: 3px;
      }
    }
    .right{
      width: 242rpx;
    }
    .link{
      color: #0A4CE9;
      display: inline-block;
      font-size: 28rpx;
    }
    .opt {
      margin-top: 26rpx;
    }
    .grey{
      color: #7C7C7C;
    }
    .birth {
      white-space: nowrap;
    }
  }
}
.dir-select{
  position: relative;
  display: flex;
  align-items: center;
  background: #E3E8FC;
  height: 68rpx;
  line-height: 68rpx;
  padding: 0 40rpx;
  border-radius: 16rpx;
  .iconfont{
    margin-left: 20rpx;
    font-size: 14px;
  }
}
.cascader-title-box{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.summary-page,.pcenter-sider{
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  z-index: 9999;
}

.dialogue-sheet {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 32rpx;
  box-sizing: border-box;
  color: #1d1d1f;
  position: relative;
  background: #ffffff;
  overflow: hidden;
  border-radius: 30rpx 30rpx 0 0;
  backdrop-filter: none;
  .dialogue-sheet-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #5C83E7;
    position: relative;
    z-index: 1;
    .iconfont {
      font-size: 38rpx;
      padding: 8rpx;
    }
    .dialogue-sheet-subtitle {
      font-size: 32rpx;
      font-weight: 600;
    }
    .dialogue-nav-placeholder {
      width: 48rpx;
      height: 38rpx;
    }
  }
  .dialogue-sheet-title {
    margin-top: 32rpx;
    text-align: center;
    font-size: 30rpx;
    color: #1f1f1f;
    line-height: 1.6;
    font-weight: 500;
    position: relative;
    z-index: 1;
  }
  .dialogue-sheet-body{
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 1;
    min-height: 0;
  }
  .answer-content{
    flex: 1;
    min-height: 0;
    margin-top: 32rpx;
    padding: 0 20rpx 20rpx;
    box-sizing: border-box;
    width: 100%;
  }
  .dialogue-empty{
    width: 100%;
    min-height: 200rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 26rpx;
    text-align: center;
  }
  .bottomAnchor{
    height: 20rpx;
  }
  .input-box{
    position: relative;
    width: 100%;
    padding-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    margin-top: 10rpx;
    flex-shrink: 0;
    align-items: center;
  }
  .uploaded-files{
    height: 80rpx;
    margin-bottom: 6rpx;
    padding: 17rpx 12rpx;
    background: transparent;
    border-radius: 16rpx;
    box-sizing: border-box;
    position: relative;
    overflow-x: auto;
    display: flex;
    align-items: center;
    gap: 18rpx;
    .file-item{
      display: flex;
      align-items: center;
      background: #FFFFFF;
      border: 1rpx solid #71CBFF;
      border-radius: 12rpx;
      width: 103rpx;
      height: 46rpx;
      position: relative;
      justify-content: center;
      flex-shrink: 0;
      .file-thumb{
        width: 32rpx;
        height: 32rpx;
        border-radius: 6rpx;
        background: #5C83E7;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18rpx;
      }
      .remove-file{
        position: absolute;
        top: -8rpx;
        right: -8rpx;
        font-size: 24rpx;
        color: #f36754;
        width: 32rpx;
        height: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 50%;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
      }
    }
  }
  .input-content{
    position: relative;
    padding: 16px 96px 48px 16px;
    width: 393px;
    height: 107px;
    border: 1rpx solid #71CBFF;
    border-radius: 20px 20px 0 0;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    flex-direction: column;
  }
  .condition-box{
    margin-bottom: 16rpx;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12rpx;
    .select-btn{
      flex: 1;
      text-align: center;
      padding: 8rpx 12rpx;
      border-radius: 999px;
      border: 1rpx solid #A0B4FF;
      font-size: 24rpx;
      color: #5C83E7;
      white-space: nowrap;
      &.active{
        background: #5C83E7;
        color: #fff;
        border-color: #5C83E7;
      }
    }
  }
  .input-textarea{
    width: 100%;
    flex: 1;
    min-height: 140rpx;
    font-size: 26rpx;
    color: #2b2b2b;
  }
  .upload-file-btn{
    position: absolute;
    z-index: 10;
    right: 100rpx;
    bottom: 10rpx;
    width: 64rpx;
    height: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    .upload-icon{
      width: 40rpx;
      height: 40rpx;
    }
  }
  .send-btn{
    position: absolute;
    z-index: 1;
    right: 20rpx;
    bottom: 10rpx;
    width: 64rpx;
    height: 64rpx;
    border-radius: 64rpx;
    background: #5C83E7;
    display: flex;
    align-items: center;
    justify-content: center;
    .iconfont{
      color: #fff;
    }
    &.disabled{
      background: #ACACAC;
      color: #777777;
      .iconfont{
        color: #f4f4f4;
      }
    }
  }
}
.dialogue-sheet::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(179.97deg, rgba(113, 203, 255, 0.35) 0.03%, rgba(255, 255, 255, 0.15) 70.05%, rgba(255, 54, 48, 0.15) 115.9%);
  z-index: 0;
}
